<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Grid代码演示</title>
<link href="../css/bootstrap3.css" rel="stylesheet">
<link href="../css/font-awesome.css" rel="stylesheet">
<link href="../css/koala.css" rel="stylesheet">
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../lib/Koala_Toggle.js" type="text/javascript"></script>
</head>
<body>
<div class="container" data-role="toggle-container">
<div class="content" data-role="toggle-content">
<pre>
&lt;script&gt;
    //定义数据，
    var staticData = [
        {"id":1,"name":"operator1","roleDesc":"操作员"},
        {"id":2,"name":"operator2","roleDesc":"操作员"},
        {"id":3,"name":"operator3","roleDesc":"操作员"},
        {"id":4,"name":"operator4","roleDesc":"操作员"},
        {"id":5,"name":"operator5","roleDesc":"操作员"},
        {"id":6,"name":"operator6","roleDesc":"操作员"},
        {"id":7,"name":"operator7","roleDesc":"操作员"},
        {"id":8,"name":"operator8","roleDesc":"操作员"},
        {"id":9,"name":"operator9","roleDesc":"操作员"},
        {"id":10,"name":"operator10","roleDesc":"操作员"},
        {"id":11,"name":"operator11","roleDesc":"操作员"},
        {"id":12,"name":"operator12","roleDesc":"操作员"},
        {"id":13,"name":"operator13","roleDesc":"操作员"},
        {"id":14,"name":"operator14","roleDesc":"操作员"},
        {"id":15,"name":"operator15","roleDesc":"操作员"},
        {"id":16,"name":"operator16","roleDesc":"操作员"},
        {"id":17,"name":"operator17","roleDesc":"操作员"},
        {"id":18,"name":"operator18","roleDesc":"操作员"},
        {"id":19,"name":"operator19","roleDesc":"操作员"},
        {"id":20,"name":"operator20","roleDesc":"操作员"},
        {"id":21,"name":"operator21","roleDesc":"操作员"},
        {"id":22,"name":"operator22","roleDesc":"操作员"}
    ];
    
    $(function(){
        var columns = [
            {title : "角色名称",name : "name",width : 250}, 
            {title : "角色描述",name : "roleDesc",width : 250}
        ];
        var buttons = [
            {content: '&lt;button class="btn btn-primary" type="button"&gt;&lt;span class="glyphicon glyphicon-plus"&gt;&lt;span&gt;创建&lt;/button&gt;', action: 'add'},
            {content: '&lt;button class="btn btn-success" type="button"&gt;&lt;span class="glyphicon glyphicon-edit"&gt;&lt;/span&gt;&nbsp;修改&lt;/button&gt;', action: 'modify'},
            {content: '&lt;button class="btn btn-danger" type="button"&gt;&lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt;&nbsp;删除&lt;/button&gt;', action: 'delete'}
        ];

        $("#myGrid").grid({
            identity: 'id',
            columns: columns,
            buttons: buttons,
            querys: [{title: '角色名称', value: 'name'},{title: '角色描述', value: 'roleDesc'}],
            isUserLocalData:true,			//如果为false，则发送ajax请求到url端，获取数据，否则，则视为获取静态数据
            url:"../common/data.js",        //这里的url就是发送ajax请求到后端的地址，也可以是一个js文件，
            localData:staticData            //为了增加方便性，这里可以用一个js对象数组，需要设置isUserLocalData为true
            ,isShowIndexCol:true			//设置true显示索引列
            ,lockWidth: true				//锁定列宽度
        }).on({
            'add': function(){
                alert("add action");
            },
            'modify': function(event, data){
                alert("modify action");
            },
            'delete': function(event, data){
                alert('delete action');
            }
        });
    })
&lt;/script&gt;
</pre>
</div>
</div>
</body>
</html>